<template>
  <div class="dashboard-container" id="order-app" v-loading="loading">
    <div class="container">
      <!-- 搜索项 -->
      <div class="tableBar">
        <el-input
          v-model="input"
          placeholder="请输入订单号"
          style="width: 250px"
        >
          <template #prefix><Search /></template>
        </el-input>
        <el-date-picker
          v-model="orderTime"
          type="datetimerange"
          placeholder="选择日期"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD HH:mm:ss"
          :default-time="defaultTime"
          style="width: 300px; margin-left: 20px; height: 40px"
        />

        <el-button type="primary" class="search-btn" @click="init"
          >查询</el-button
        >
      </div>
      <el-table :data="tableData" stripe class="tableBox">
        <el-table-column
          prop="number"
          label="订单号"
          min-width="110"
        ></el-table-column>
        <el-table-column prop="订单状态" label="订单状态">
          <template #default="{ row }">
            <span>{{ getOrderType(row) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="用户"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="orderTime"
          label="下单时间"
          min-width="100"
        ></el-table-column>
        <el-table-column prop="amount" label="实收金额">
          <template #default="{ row }">
            <span>￥{{ row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="btn" label="操作" class="btn-box" width="180">
          <template #default="{ row }">
            <el-button type="text" @click="goDetail(row)" class="blueBug">
              查看
            </el-button>
            <el-divider
              v-if="row.status === 2"
              direction="vertical"
            ></el-divider>
            <el-button
              v-if="row.status === 2"
              type="text"
              @click="cancelOrDeliveryOrComplete(3, row.id)"
              class="blueBug"
            >
              派送
            </el-button>
            <el-divider
              v-if="row.status === 3"
              direction="vertical"
            ></el-divider>
            <el-button
              v-if="row.status === 3"
              type="text"
              @click="cancelOrDeliveryOrComplete(4, row.id)"
              class="blueBug"
            >
              完成
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageList"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        v-model:current-page.sync="page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <!-- 查看弹框部分 -->
    <el-dialog
      title="订单信息"
      v-model="dialogVisible"
      width="30%"
      @close="handleClose"
    >
      <el-form :model="diaForm" class="dia-form">
        <el-form-item label="订&nbsp;&nbsp;单&nbsp;&nbsp;号" prop="number">
          <span>{{ diaForm.number }}</span>
        </el-form-item>
        <el-form-item label="订单状态">
          <span>{{ getOrderType(diaForm) }}</span>
        </el-form-item>
        <el-form-item label="收&nbsp;&nbsp;货&nbsp;&nbsp;人">
          <span>{{ diaForm.consignee }}</span>
        </el-form-item>
        <el-form-item label="联系电话">
          <span>{{ diaForm.phone }}</span>
        </el-form-item>
        <el-form-item label="地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址">
          <span>{{ diaForm.address }}</span>
        </el-form-item>
        <el-form-item label="支付金额">
          <span>{{ diaForm.amount }}</span>
        </el-form-item>
        <el-form-item label="下单时间">
          <span>{{ diaForm.orderTime }}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getList, editOrderDetail } from "@/api/order/order";
import { watch } from "vue";

const input = ref("");
const orderTime = ref([]);
const defaultTime = reactive([
  new Date(2000, 1, 1, 12, 0, 0),
  new Date(2000, 2, 1, 8, 0, 0),
]);
const beginTime = ref("");
const endTime = ref("");
const counts = ref(0);
const page = ref(1);
const pageSize = ref(10);
const tableData = ref([]);
const open = ref(false);
const diaForm = reactive({});
const loading = ref(false);
const dialogVisible = ref(false);

watch(orderTime, (newValue, oldValue) => {
  if (newValue && newValue.length >= 2) {
    beginTime.value = newValue[0];
    endTime.value = newValue[1];
  } else {
    beginTime.value = "";
    endTime.value = "";
  }
});
const createdFunc = () => {
  init();
};

const init = () => {
  getList({
    page: page.value,
    pageSize: pageSize.value,
    number: input.value || undefined,
    beginTime: beginTime.value || undefined,
    endTime: endTime.value || undefined,
  })
    .then((res) => {
      if (String(res.code) === "1") {
        // res.data.records = res.data.records.map((obj) => {
        // obj.amount = (obj.amount / 100).toFixed(2);
        // return obj;
        // });
        tableData.value = res.data.records || [];
        counts.value = res.data.total;
      }
    })
    .catch((err) => {
      return ElMessage({ type: "error", message: "请求出错了!" });
    });
};
init();
const handleQuery = () => {
  page.value = 1;
  init();
};
const getOrderType = (row) => {
  let str = "";
  switch (row.status) {
    case 1:
      str = "待付款";
      break;
    case 2:
      str = "正在派送";
      break;
    case 3:
      str = "已派送";
      break;
    case 4:
      str = "已完成";
      break;
    case 5:
      str = "已取消";
      break;
  }
  return str;
};
// 查看详情
const goDetail = (row) => {
  dialogVisible.value = true;
  Object.keys(diaForm).forEach((key) => {
    delete diaForm[key];
  });
  for (const key in row) {
    diaForm[key] = row[key];
  }
};
// 取消，派送，完成
const cancelOrDeliveryOrComplete = (status, id) => {
  const params = {
    status,
    id,
  };
  ElMessageBox.confirm("确认更改该订单状态?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    editOrderDetail(params)
      .then((res) => {
        if (res.code === 1) {
          ElMessage({
            type: "success",
            message: status === 3 ? "订单已派送" : "订单已完成",
          });
         init();
        } else {
          ElMessage({ type: "error", message: res.msg || "操作失败" });
        }
      })
      .catch((err) => {
        ElMessage({ type: "error", message: "请求出错了：" + err });
      });
  });
};
const handleClose = () => {
  dialogVisible.value = false;
};
const handleSizeChange = (val) => {
  pageSize.value = val;
  init();
};
const handleCurrentChange = (val) => {
  page.value = val;
  init();
};
</script>

<style lang="scss" scoped>
.search-btn {
  margin-left: 20px;
}
.tableBar {
  justify-content: flex-start !important;
}
.info-box {
  margin: -15px -44px 20px;
}
.info-box .item-box {
  display: flex;
  height: 20px;
  line-height: 25px;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  text-align: left;
  margin-bottom: 14px;
}
.info-box .item-box:last-child {
  margin-bottom: 0;
}
.info-box .item-box .label {
  width: 96px;
}
.info-box .item-box .des {
  flex: 1;
  color: #333333;
}

.dia-form {
  background-color: rgba(247, 247, 247, 0.338);
  border-radius: 20px;
  padding: 10px 15px;
  margin-bottom: 20px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  .el-form-item {
    border-bottom: 1px solid rgb(234, 234, 234);
  }
  .el-form-item__label {
    min-width: 30% !important;
  }
  .el-form-item__content span {
    min-width: 100%;
    text-align: right;
  }
}
</style>
  
